<template>
	<view class="statistics">
		<view class="tab">
			<view @click="levelClick(item.id)" v-for="(item,index) in level" :class="item.id == level_id ? 'tabavctiy' : ''">{{item.name}}</view>
			
		</view>
		<view class="statistics-title">
			<image src="../../static/statistics/tongji.png"></image>
			<view>数据一栏表</view>
		</view>
		<view class="statistics-body">
			<view class="statistics-body-f">
				<view>答题次数</view>
				<view class="statistics-body-f-2">{{statistics.count}}</view>
			</view>
			<view class="statistics-body-f">
				<view>答对率</view>
				<view  class="statistics-body-f-2">{{statistics.daduilu}}%</view>
			</view>
			<view class="statistics-body-f">
				<view>提示率</view>
				<view  class="statistics-body-f-2">{{statistics.hintnumberlu}}%</view>
			</view>
			
		</view>
		
		<view class="statistics-title">
			<image src="../../static/statistics/time.png"></image>
			<view>时间</view>
		</view>
		
		<view class="statistics-body">
			<view class="statistics-body-f">
				<view>累计用时</view>
				<view class="statistics-body-f-2">{{statistics.time}}</view>
			</view>
			<view class="statistics-body-f">
				<view>最短用时</view>
				<view  class="statistics-body-f-2">{{statistics.duantime}}</view>
			</view>
			<view class="statistics-body-f">
				<view>平均用时</view>
				<view  class="statistics-body-f-2">{{statistics.pingtime}}</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				level : [],
				level_id : '',
				statistics : {
					'count' : 0,
					'daduilu' : 0,
					'hintnumberlu' : 0,
					'time'  : '--:--',
					'duantime' : '--:--',
					'pingtime' : '--:--',
 				}
			}
		},
		onShow() {
			this.getall();
		},
		methods: {
			getall(){
				let that  = this;
				that.$questions.getQuestionsLevel({'is_date': 0}).then(res=>{
					that.level = res.data.list;
					that.level_id  = res.data.list[0].id;
					that.getstatistics();
					console.log(res);
				})
			},
			levelClick(e){
				this.level_id  =e;
				this.getstatistics();
			},
			getstatistics(){
				let that  = this;
				that.$questions.getstatistics({'lid': that.level_id}).then(res=>{
					that.statistics  = res.data;
				})
				
			}
		}
	}
</script>

<style lang="less">
	.statistics {
		width: 690rpx;
		margin: auto;
	}
	.tab {
		display: flex;
		border: 2rpx  solid #3eb8ff;
		line-height: 80rpx;
		margin-top: 60rpx;
		color: #3eb8ff;
		margin-bottom: 60rpx;
		view {
			flex: 1;
			text-align: center;
			border-right: 2rpx solid #3eb8ff;
			font-size: 42rpx;
		}
		.tabavctiy {
			background-color: #3eb8ff;
			color: #fff;
		}
	}
	.statistics-title {
		display: flex;
		justify-content: center;
		font-size: 42rpx;
		image {
			width: 60rpx;
			height: 60rpx;
		}
		view {
			padding-left: 20rpx;
			color: #3eb8ff;
		}
	}
	.statistics-body {
		margin-top: 40rpx;
		border: 4rpx solid #3eb8ff;
		border-radius: 10rpx;
		padding-left: 60rpx;
		padding-right: 60rpx;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		background-color: #a1d7f721;
		margin-bottom: 60rpx;
		.statistics-body-f {
			display: flex;
			color: #3eb8ff;

			font-size: 38rpx;
			view {
				padding-bottom: 20rpx;
				padding-top: 20rpx;
			}
			.statistics-body-f-2 {
				margin-left: auto;
			}
		}
	}
</style>
